<template>
    <div>
        <!-- 注册第三步填写密码-->
        <!-- 顶部导航 -->
        <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)" title="京东注册页" />
        <!-- 表单 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="password" name="tel" label="密码" placeholder="至少6位,包含大小写字母数字特殊字符" @input="judgeFn"
                    :rules="[{ validator, pattern, message: '请输入正确格式的密码' }]" />

            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" :disabled="use" id="submit"
                    class="nextButton">
                    完成
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { Dialog } from 'vant';
// 引入注册接口
import { registerApi } from '@/api/registApi'
import { ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
// 引入注册对应的Pinia仓库
import { useregisterStore } from '@/store/useregisterStore'
// 使用pinia
const registerStore = useregisterStore()
const router = useRouter()
let password = ref('')
// 定义密码的正则
let pattern = /^(?!([a-zA-Z\d]*|[\d!@#\$%_\.]*|[a-zA-Z!@#\$%_\.]*)$)[a-zA-Z\d!@#\$%_\.]{6,16}$/
const validator = (value: string) => {
    return pattern.test(value)
}
// 定义一个判断按钮禁用状态的数据，默认是禁用
let use = ref(true)
// 输入框输入时进行正则判断
let judgeFn = () => {
    if (validator(password.value)) {
        use.value = false
    } else {
        use.value = true
    }
}
interface userInfo {
    tel: string,
    password: string
}

let onSubmit = () => {
    let value: userInfo = {
        tel: registerStore.tel,
        password: password.value
    }
    registerApi(value).then((res: any) => {
        console.log('注册接口请求数据', res);
        // 把密码也存到pinia中
        registerStore.setPwd(password.value)
        // console.log(tel.value);
        Dialog.confirm({
            message:
                `注册成功，立即登录?`,
        })
            .then(() => {
                // on confirm点击确定，跳转到登录页面
                router.push('/login')
            })
            .catch(() => {
                // on cancel
            });


    })
}
</script>
<style scoped lang="scss">
.van-form {
    width: 90%;
    height: 500px;
    margin: 60px auto;
    position: relative;

    .van-field {
        padding: 10px 16px;
    }

    .nextButton {
        background-color: #D30707;
        border: #D30707;
        margin-top: 60px;
    }
}
</style>